<template>
    <div id="app">
      <div>
        <span>姓名:</span>
        <input type="text" v-model="name" placeholder="请输入姓名" />
      </div>
      <div>
        <span>年龄:</span>
        <input type="number" v-model.number="age" placeholder="请输入年龄" />
      </div>
      <div>
        <span>性别:</span>
        <select v-model="sex">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div>
        <button @click="add()">添加/修改</button>
      </div>
      <div>
        <table border="1" cellpadding="10" cellspacing="0">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>性别</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody v-if="list.length">
            <tr v-for="(item, index) in list" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.age }}</td>
              <td>{{ item.sex }}</td>
              <td>
                <button @click="del(item.id)">删除</button>
                <button @click="bj(item.name, item.sex, item.age, item.id)">
                  编辑
                </button>
              </td>
            </tr>
          </tbody>
  
          <tbody v-else>
            <tr>
              <td colspan="5">
                <span class="none">暂无数据</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        nid: '',
        name: '',
        age: '',
        sex: '',
        id: '',
        flag: true,
        list: [],
      }
    },
    methods: {
      del(id) {
        this.list = this.list.filter((item) => item.id !== id)
      },
      add() {
        if (!this.name || !this.age || !this.sex) {
          alert('请输入正确的字符')
          return
        }
        if (this.flag) {
          this.list.push({
            name: this.name,
            age: this.age,
            sex: this.sex,
            id: this.id++,
          })
          ;(this.name = ''), (this.age = ''), (this.sex = '')
        } else {
          this.list.forEach((item) => {
            if (this.nid == item.id) {
              item.age = this.age
              item.name = this.name
              item.sex = this.sex
              this.flag = true
              ;(this.name = ''), (this.age = ''), (this.sex = '')
            }
          })
        }
      },
      bj(name, sex, age, id) {
        this.flag = false
        this.nid = id
        this.name = name
        this.sex = sex
        this.age = age
      },
    },
  }
  </script>
  